<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="js/JQuery/jquery-2.0.3.js"></script>
    <!--<link href="js/arcgis_js_api/library/3.24/3.24/dijit/themes/tundra/tundra.css" rel="stylesheet" />
    <link href="js/arcgis_js_api/library/3.24/3.24/esri/css/esri.css" rel="stylesheet" />
    <link href="js/arcgis_js_api/library/3.24/3.24/dijit/themes/nihilo/nihilo.css" rel="stylesheet" />
    <script src="js/arcgis_js_api/library/3.24/3.24/init.js"></script>-->

    <!--
    <link href="js/arcgis_js_api/library/4.15//4.15/esri/css/main.css" rel="stylesheet" />
    <script src="js/arcgis_js_api/library/4.15/4.15/init.js"></script>
    -->

    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.16/"></script>

    <script src="js/user_js/config.js"></script>
    <style>
        table,
        th,
        td {
            border: 1px solid #0e90d2;
            border-collapse: collapse;
        }
        
        td {
            padding: 5px;
        }
        
        thead {
            background: #3bb4f2;
            color: #fff;
        }
        
        thead td {
            padding: 10px 50px;
        }
        
        tbody td:hover {
            background-color: #3bb4f2;
            color: #fff;
        }
    </style>

</head>

<body>
    <!--地图-->
    <div id="map" style="height: 700px; margin-top: 20px;"></div>

    <div style="position: absolute;top: 0px;right: 10px;background: #fff;border: 1px solid #3bb4f2;">
        <table>
            <thead>
                <tr>
                    <td colspan="2">突破管控项目列表</td>
                </tr>
            </thead>

            <tr>
                <td style="font-weight:bold;">项目名称</td>
            </tr>

            <tbody id="tb_project" style="height:500px;overflow-y:auto;display:block;">
                <!--<tr>
                    <td>项目一</td>
                    <td>占用</td>
                </tr>
                <tr>
                    <td>项目二</td>
                    <td>占用</td>
                </tr>-->
            </tbody>
        </table>
    </div>
</body>

</html>

<script>
    var map;
    var projectlist = [];

    var pid = 0; //边界管控id
    var tpno = ""; //突破边界管控类型代码
    //获取url 参数
    function GetRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }




    $(function() {
        //getParams();

        function getParams() {
            var Request = new Object();
            Request = GetRequest();
            pid = Request["pid"];
            tpno = Request["tpno"];
        }

        require([
            "esri/Basemap",
            "esri/Map",
            "esri/Graphic",
            "esri/core/urlUtils",

            "esri/views/MapView",
            "esri/views/layers/LayerView",

            "esri/layers/TileLayer",
            "esri/layers/MapImageLayer",
            "esri/layers/FeatureLayer",
            "esri/layers/GraphicsLayer",

            "esri/tasks/QueryTask",
            "esri/tasks/support/Query",

            "esri/geometry/Extent",

            "dojo/dom",
            "dojo/on",
            "dojo/domReady!"
        ], function(
            Basemap,
            Map,
            Graphic,
            urlUtils,

            MapView,
            LayerView,

            TileLayer,
            MapImageLayer,
            FeatureLayer,
            GraphicsLayer,
            QueryTask,
            Query,
            Extent,
            dom,
            on
        ) {
            //跨域设置
            // urlUtils.addProxyRule({
            //     //代理的URL。
            //     urlPrefix: config.mapconfig.serverUrl,
            //     //需要通过特定代理访问的资源的URL前缀。
            //     proxyUrl: location.protocol + "//" + location.host + location.pathname.substring(0, location.pathname.lastIndexOf('/')) + "/DotNet/proxy.ashx"
            // });

            //创建地图,设置边框的范围
            var startExtent = new Extent({
                xmin: config.mapconfig.pgkhExtent.min_x,
                ymin: config.mapconfig.pgkhExtent.min_y,
                xmax: config.mapconfig.pgkhExtent.max_x,
                ymax: config.mapconfig.pgkhExtent.max_y,
                spatialReference: {
                    wkid: config.mapconfig.mapwkid
                }
            });

            //创建地图-底图
            var basemap = new Basemap({
                baseLayers: [
                    new MapImageLayer({
                        url: config.mapconfig.basemapurl
                    })
                ],
                title: "basemap",
                id: "basemap"
            });

            var czlayer = new MapImageLayer({
                url: config.mapconfig.czurl
            });

            map = new Map({
                basemap: basemap,
                layers: [czlayer]
            });

            var view = new MapView({
                container: "map",
                map: map,
                //zoom: 3,
                Extent: startExtent,
            });
            //移除右下角logo
            view.ui._removeComponents(["attribution"]);
            //移除缩放小部件
            view.ui.remove("zoom");


            //加载项目列表
            function loadProjectList() {
                projectlist = [];
                var queryTask = new QueryTask({
                    url: config.mapconfig.hxUrl
                });
                var query = new Query();
                query.where = "1=1 and tpgk like '%" + tpno + "%'";
                query.outFields = ["*"];
                query.returnGeometry = true;
                queryTask.execute(query).then(function(evt) {
                    if (evt != null) {
                        if (evt.features.length > 0) {
                            for (var i = 0; i < evt.features.length; i++) {
                                projectlist.push(evt.features[i]);
                                var tr = $("<tr>");
                                var td_name = $("<td>");
                                td_name.append(evt.features[i].attributes["PRJNAME"]);
                                tr.append(td_name);
                                tr.attr("prjid", evt.features[i].attributes["PRJID"]);
                                $("#tb_project").append(tr);
                                $(tr).on("click", function() {
                                    selectTr(this);
                                });
                            }
                        }
                    }
                })
            }

            //定位选中项目地块
            function selectTr(obj) {
                var prjLayer = new GraphicsLayer();
                var prjid = $(obj).attr("prjid");
                if (projectlist.length > 0) {
                    for (var i = 0; i < projectlist.length; i++) {
                        if (projectlist[i].attributes["PRJID"] == prjid) {
                            var graphic = new Graphic({
                                geometry: projectlist[i].geometry,
                                symbol: {
                                    type: "simple-fill",
                                    color: [255, 255, 255],
                                    style: "solid",
                                    outline: {
                                        color: [255, 0, 0],
                                        width: 2
                                    }
                                }
                            });
                            prjLayer.graphics.add(graphic);
                            map.add(prjLayer);
                            var sExtent = new Extent({
                                xmin: projectlist[i].geometry.extent.xmin - 500,
                                ymin: projectlist[i].geometry.extent.ymin - 500,
                                xmax: projectlist[i].geometry.extent.xmax + 500,
                                ymax: projectlist[i].geometry.extent.ymax + 500,
                                spatialReference: {
                                    wkid: config.mapconfig.mapwkid
                                }
                            });
                            view.extent = sExtent;
                        }
                    }
                }
            }
        });
    });
</script>